import './index.scss';
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import {observer} from 'mobx-react'  //观察者,被它所包裹的组件就是响应式的，改了数据页面就会更新
import { Button,Space,Modal,Form,Input,Select,Radio,Upload,Table,message} from 'antd';
import { useNavigate }from 'react-router-dom';
import React, { useState,useEffect } from 'react';
const { Option } = Select;
const {Medal}=store;

  
const MedalManagement=()=>{

    //获取表格数据
    useEffect(() => {
        if (Medal.medaldata.length === 0) {
            Medal.getAllmedal(1)
        }
    }, [])


    //------------------------------------------多条件查询-----------------
    const navigate=useNavigate();
    const [medalform] = Form.useForm();
    const onFinish = (values) => {
        console.log('查询 ', values);
    };
    const submit = () => {
        const a= medalform.getFieldsValue(true)
        console.log(a);
        Medal.getQueryMedal(a)
    };
    const onReset = () => {
        medalform.resetFields();
        //重置条件查询表单后，重新获取表单数据，展示第一页
        Medal.getAllmedal(1)
    };
    //----------------------新增--------------------
    const add=()=>{
        console.log('新增')
        navigate('/home/addMedal')
    }
    
    //------------------------上架确认模态框------------
    const onSale=()=>{
        console.log('上架')
        if(Medal.selectMedals.length===0){
            return message.warn('请选择要上架的勋章！')
        }
        Modal.confirm({
            title: `确认上架选中的${Medal.selectMedals.length}个勋章吗？`,
            okText:'确认',
            cancelText:'取消',
            onOk: ()=>{
                Medal.editMedalState(Medal.selectMedalsID,"上架");
                message.success('上架成功！')
            },
            onCancel: () => {
              message.info('已取消上架')
            }
          })
    }
    //------------------------下架确认模态框-----------------
    const offShelves=()=>{
        console.log('下架')
        if(Medal.selectMedals.length===0){
            return message.warn('请选择要下架的勋章！')
        }
        Modal.confirm({
            title: `确认下架选中的${Medal.selectMedals.length}个勋章吗？`,
            okText:'确认',
            cancelText:'取消',
            onOk: ()=>{
                Medal.editMedalState(Medal.selectMedalsID,"下架");
                message.success('下架成功！');
            },
            onCancel: () => {
              message.info('已取消下架')
            }
          })
    }
    //------------------------删除确认模态框------------------
    const del=()=>{
        console.log('删除')
        if(Medal.selectMedals.length===0){
            return message.warn('请选择要删除的勋章！')
        }
        Modal.confirm({
            title: `确认删除选中的${Medal.selectMedals.length}个勋章吗？`,
            okText:'确认',
            cancelText:'取消',
            onOk: ()=>{

                Medal.delMedal(Medal.selectMedalsID);
                message.success('删除成功！')
            },
            onCancel: () => {
              message.info('已取消删除')
            }
          })
    }
    //------------------------编辑----------------------------
    const Edit=(val)=>{
        console.log("编辑项数据");
        //路由带参
        navigate('/home/editMedal',
        {
            state:{
            row:val
            }
        })
    }
   
    const [selectionType] = useState('checkbox');
    const columns = [
        {
            title: '编号',//表格列名
            dataIndex: 'medalId',//对应数据字段
            key: 'medalId',//该列的唯一值
        },
        {
            title: '图标',
            dataIndex: 'imgSrc',
            key: 'imgSrc',
            render:(record)=>{
                // console.log(record);
                return <img src={record} width="50px" alt=""/>
            }
        },
        {
            title: '名称',
            dataIndex: 'medalName',
            key: 'medalName',
        },
        {
            title: '完成内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '可获积分',
            dataIndex: 'points',
            key: 'points',
        },
        {
            title: '兑换商品',
            dataIndex: 'goods',
            key: 'goods',
        },
        {
            title: '权重',
            dataIndex: 'weight',
            key: 'weight',
        },
        {
            title: '操作',
            render:(_,record)=>(
                <Button type="link" onClick={()=>{Edit(record)}}>编辑</Button>   
            )

        },
    ];


    return <div className='medalBigBox'>
        <div className='queryBox'>
            <Form
                form={medalform}
                name='medalform'
                onFinish={onFinish}
                layout="inline"
                
            >
                <Space size={"middle"}>
                    {/* <Form.Item
                        label="所属app"
                        name="app">
                    <Select style={{width: 120}}>
                        <Option value='小黑早教，小黑绘本'>全部</Option>
                        <Option value='小黑早教'>小黑早教</Option>
                        <Option value='小黑绘本'>小黑绘本</Option>
                    </Select> 
                    </Form.Item> */}
                    <Form.Item
                        label="勋章名称"
                        name="medalName"
                        > 
                        <Input placeholder='勋章名称' />
                    </Form.Item>
                    <Button type='primary' onClick={submit} className='btnStyle'>搜索</Button>
                    <Button  onClick={onReset} className='btnStyle'>重置</Button>
                </Space>
                
            </Form>
        </div>
        {/* --------------------------功能按键--------------------- */}
        <div className='optionBox'>
            <Space size={'large'}>
                <Button type='primary' className='btnStyle' onClick={add}>新增</Button>
                <Button type='primary' className='btnStyle' onClick={onSale}>上架</Button>
                <Button type='primary' className='btnStyle' onClick={offShelves}>下架</Button>
                <Button type='primary' className='btnStyle' onClick={del}>删除</Button>
            </Space>
            
        </div>
        {/* --------------------------------表格+分页------------------- */}
        <div className='tableBox'>
            <Table  
                rowSelection={{
                    type: selectionType,
                    onChange( selectedRowKeys,rows){
                        Medal.setSleMedal(rows)
                        Medal.setSleMedalsId(selectedRowKeys)
                        // console.log("批量选中的id数组",selectedRowKeys);
                    }
                }}
                columns={columns} 
                dataSource={Medal.medaldata} 
                rowKey={(record) => record.medalId}
                pagination={{pageSize:5}}
                bordered/>
        </div>
        
    </div>
}
export default observer(MedalManagement);